<template>
	<view class="container">
		<!-- 全局统计卡片 -->
		<u-grid :col="4" :border="false" class="summary-card">
			<u-grid-item  v-if="currentUserJob != 'cg'">
				<view class="stat-item">
					<text class="stat-label">总库存</text>
					<text class="stat-value" :class="text-primary">{{ totalStockNum }}</text>
				</view>
			</u-grid-item>
			<u-grid-item>
				<view class="stat-item">
					<text class="stat-label">总冻结库存</text>
					<text class="stat-value" :class="text-primary">{{ totalFreezeStockNum }}</text>
				</view>
			</u-grid-item>
			<u-grid-item>
				<view class="stat-item">
					<text class="stat-label">总发配件数</text>
					<text class="stat-value">{{ sendInNum }}</text>
				</view>
			</u-grid-item>
			<u-grid-item>
				<view class="stat-item">
					<text class="stat-label">总发退配件数</text>
					<text class="stat-value">{{ sendRetNum }}</text>
				</view>
			</u-grid-item>
			<u-grid-item>
				<view class="stat-item">
					<text class="stat-label">总收配件数</text>
					<text class="stat-value">{{ receiveTotalInNum }}</text>
				</view>
			</u-grid-item>
			<u-grid-item>
				<view class="stat-item">
					<text class="stat-label">总收退配件数</text>
					<text class="stat-value">{{ receiveTotalRetNum }}</text>
				</view>
			</u-grid-item>




		</u-grid>

		<!-- 用户层级列表 -->
		<u-list>
			<u-list-item v-for="user in usersStatis" :key="user.userId" class="user-card">
				<!-- 用户标题区 -->
				<view class="user-header">
					<text class="user-name">{{ user.nickName }}</text>
					<view class="user-stats">
						<u-tag  :text="`产品:${user.totalProductNum}`" type="info" plain size="mini" />
						<u-tag :text="`配件:${user.totalPartsNum}`" plain size="mini" />
						<u-tag v-if="currentUserJob != 'cg'" :text="`库存:${user.totalStockNum}`" plain size="mini" />
						<u-tag v-if="currentUserJob != 'cg'" :text="`冻结:${user.totalFreezeStockNum}`" type="warning" plain size="mini" />
						<u-tag  :text="`发件:${user.sendInNum}`" plain size="mini" />
						<u-tag :text="`发退件:${user.sendRetNum}`" type="warning" plain size="mini" />
						<u-tag :text="`收件:${user.receiveTotalInNum}`" plain size="mini" />
						<u-tag :text="`收退件:${user.receiveTotalRetNum}`" type="warning" plain size="mini" />
					</view>
					
				</view>

				<!-- 产品列表 -->
				<view v-for="product in user.productList" :key="product.productName" class="product-section">
					<!-- 产品标题 -->
					<view class="product-header">
						<text class="product-name">{{ product.productName }}</text>
						<view class="product-stats" v-if="currentUserJob != 'cg'">
							<u-tag :text="`库存:${product.totalStockNum}`" :type="getStockType(product.totalStockNum)"
								size="mini" />
							<u-tag :text="`冻结:${product.totalFreezeStockNum}`" type="warning" size="mini" />
						</view>
					</view>

					<!-- 配件表格 -->
					<view class="parts-table">
						<view class="table-header">
							<text class="header-cell">配件名称</text>
							<text class="header-cell" v-if="currentUserJob != 'cg'">库存/冻结</text>
							<text class="header-cell">采购类型</text>
							<!-- <text class="header-cell">库存/冻结</text> -->
						</view>

						<!-- 配件行 -->
						<view v-for="part in product.partsList" :key="part.partsId" class="part-group">
							<!-- 配件汇总行 -->
							<view class="table-row summary-row">
								<text class="body-cell">{{ part.partsName }}</text>
								<text class="body-cell" :class="text-primary" v-if="currentUserJob != 'cg'">
									<text :class="{'text-warning': part.totalStockNum < 10}">
										{{ part.totalStockNum }}
									</text>
									/
									<text>{{ part.totalFreezeStockNum }}</text>
								</text>
								<!-- 采购类型明细 -->
								<!-- <view class="body-cell table-row detail-row">
									<u-tag v-if="part.sendInNum > 0" :text="`发件:${part.sendInNum}`" :type="success" size="mini" />
									<u-tag v-if="part.sendRetNum > 0" :text="`发退件:${part.sendRetNum}`" type="warning" plain size="mini" />
									<u-tag v-if="part.sendInFreezeNum > 0" :text="`发件冻结:${part.sendInFreezeNum}`" :type="success" size="mini" />
									<u-tag v-if="part.sendRetFreezeNum > 0" :text="`发退件冻结:${part.sendRetFreezeNum}`" type="warning" plain size="mini" />
									<u-tag v-if="part.receiveTotalInNum > 0" :text="`收件:${part.receiveTotalInNum}`" :type="success" plain size="mini" />
									<u-tag v-if="part.receiveTotalRetNum > 0" :text="`收退件:${part.receiveTotalRetNum}`" type="warning" plain size="mini" />

								</view> -->
								
								<view class="body-cell table-row detail-row" detail-container>
									<u-tag :text="`发件:${part.sendInNum}`" :type="success" size="mini" />
									<u-tag  :text="`发退:${part.sendRetNum}`" type="warning" plain size="mini" />
									<u-tag  :text="`发冻:${part.sendInFreezeNum}`" :type="success" size="mini" />
									<u-tag  :text="`退冻:${part.sendRetFreezeNum}`" type="warning" plain size="mini" />
									<u-tag  :text="`收:${part.receiveTotalInNum}`" :type="success" plain size="mini" />
									<u-tag  :text="`收退:${part.receiveTotalRetNum}`" type="warning" plain size="mini" />
								
								</view>
<!-- 
								<text class="body-cell">
									<text :class="{'text-warning': part.stockNum < 10}">
										{{ part.stockNum }}
									</text>
									/
									<text>{{ part.freezeStockNum }}</text>
								</text> -->

							</view>


						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalStockNum: 0,
				totalFreezeStockNum: 0,
				sendInNum: 0,
				sendRetNum: 0,
				sendInFreezeNum: 0,
				sendRetFreezeNum: 0,
				receiveTotalInNum: 0,
				receiveTotalRetNum: 0,
				currentUserJob: '',
				usersStatis: []
			};
		},

		onShow() {
			this.userStock()
			this.getCurrentUserJob();
		},
		methods: {
			getCurrentUserJob() {
				this.$http.get('factoryUser/currentUserJob', {}, res => {
					if (res.success) {
						this.currentUserJob = res.data
					}
				})
			},
			userStock() {
				this.$http.get('stockStatis/userStock', {}, res => {
					if (res.success) {
						if (res.data != null) {
							this.totalStockNum = res.data.totalStockNum;
							this.totalFreezeStockNum = res.data.totalFreezeStockNum;
							this.sendInNum = res.data.sendInNum;
							this.sendRetNum = res.data.sendRetNum;
							this.sendInFreezeNum = res.data.sendInFreezeNum;
							this.sendRetFreezeNum = res.data.sendRetFreezeNum;
							this.receiveTotalInNum = res.data.receiveTotalInNum;
							this.receiveTotalRetNum = res.data.receiveTotalRetNum;
							this.usersStatis = res.data.usersStatis;
						}

					}
				})
			},
			// 库存状态颜色标识
			getStockType(stock) {
				if (stock > 20) return 'success';
				if (stock > 5) return 'warning';
				return 'error';
			},

			// 库存文字颜色
			getStockClass(stock) {
				return stock > 0 ? 'text-primary' : 'text-error';
			}
		}
	};
</script>

<style lang="scss" scoped>
/* 全局容器样式 */
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
}

/* 统计卡片布局 */
.summary-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  display: flex;
  flex-wrap: wrap;
}

/* 统计卡片内部项 */
.summary-card ::v-deep .u-grid-item {
  flex: 0 0 50%;
  margin-bottom: 15rpx;
}

/* 统计项 */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.stat-label {
  font-size: 26rpx;
  color: #606266;
  margin-bottom: 8rpx;
  text-align: center;
  white-space: nowrap;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #2979ff;
}

/* 用户卡片 */
.user-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

/* 用户头部 */
.user-header {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ebeef5;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  display: block;
  color: #303133;
}

/* 用户统计标签 */
.user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-top: 10rpx;
}

.user-stats ::v-deep .u-tag {
  flex-shrink: 0;
  padding: 6rpx 14rpx;
  font-size: 24rpx;
}

/* 产品区域 */
.product-section {
  margin-top: 30rpx;
}

/* 产品头部 */
.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15rpx;
  margin-bottom: 10rpx;
  border-bottom: 1rpx dashed #e4e7ed;
}

.product-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #303133;
}

.product-stats {
  display: flex;
  gap: 10rpx;
}

/* 配件表格 */
.parts-table {
  border: 1rpx solid #ebeef5;
  border-radius: 12rpx;
  overflow: hidden;
}

/* 表格行 */
.table-header, 
.table-row {
  display: flex;
  border-bottom: 1rpx solid #ebeef5;
  align-items: center;
}

/* 单元格 */
.header-cell, 
.body-cell {
  padding: 20rpx 10rpx;
  text-align: center;
  font-size: 26rpx;
}

/* 表头单元格 */
.header-cell {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #606266;
  flex: 1;
}

/* 表头第一列 */
.header-cell:nth-child(1) { 
  flex: 2;
}

/* 表头第三列 */
.header-cell:nth-child(3) { 
  flex: 1.5; 
}

/* 表体单元格 */
.body-cell {
  flex: 1;
}

.body-cell:nth-child(1) { 
  flex: 2;
  text-align: left;
  padding-left: 20rpx;
}

// .body-cell:nth-child(3) { 
//   flex: 1.5; 
// }

/* 配件组 */
.part-group .summary-row {
  background-color: #fafafa;
  font-weight: 500;
}

.part-group .summary-row .body-cell:nth-child(2) {
  color: #2979ff;
  font-weight: bold;
}

/* 详细行 */
.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  justify-content: center;
  padding: 10rpx 0;
}

.detail-row ::v-deep .u-tag {
  flex-shrink: 0;
  padding: 4rpx 10rpx;
  font-size: 22rpx;
}

/* 文字颜色样式 */
.text-primary { color: #2979ff !important; }
.text-success { color: #19be6b !important; }
.text-error { color: #dd524d !important; }
.text-warning { color: #f0ad4e !important; font-weight: bold; }

/* 库存指示器 */
.stock-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stock-value {
  min-width: 40rpx;
  display: inline-block;
  text-align: right;
}

.freeze-value {
  min-width: 40rpx;
  display: inline-block;
  text-align: left;
}


/* 明细容器 */
.detail-container {
  padding: 10rpx 0;
}

/* 网格布局 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 8rpx;
}

/* 网格项 */
.detail-item {
  display: flex;
  justify-content: center;
}

/* 统一标签样式 */
.detail-tag {
  /* 统一宽度 */
  min-width: 100rpx;
  max-width: 100%;
  
  /* 统一高度和内边距 */
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 12rpx !important;
  
  /* 文字样式 */
  font-size: 22rpx !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 边框和圆角 */
  border-radius: 8rpx !important;
  border: 1rpx solid transparent !important;
  
  /* 动画效果 */
  transition: all 0.2s ease;
}

/* 悬停效果 */
.detail-tag:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
}

/* 颜色优化 - 保持原有语义但更协调 */
.detail-tag[type="success"] {
  background: #e8f5e9 !important;
  border-color: #c8e6c9 !important;
  color: #2e7d32 !important;
}

.detail-tag[type="warning"] {
  background: #fff3e0 !important;
  border-color: #ffe0b2 !important;
  color: #ef6c00 !important;
}

/* 平板和桌面适配 */
@media (min-width: 768px) {
  .detail-grid {
    grid-template-columns: repeat(6, 1fr); /* 六列布局 */
  }
}
</style>